<template>
  <el-dialog
    title="设置列"
    width="50%"
    top="8vh"
    :visible.sync="tableColumnModal"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    class="column-select"
  >
    <div class="customList">
      <div
        v-for="(item, index) in tableColumnSetData"
        :key="index"
        draggable="true"
        :class="[
          tableColumnSetData.length === index + 1
            ? 'columnSetLast'
            : 'columnSet',
          item.show ? 'blue-color' : 'gray-color',
        ]"
        @dragstart="dragstart(item, index)"
        @dragenter="dragenter(item, index)"
        @dragend="dragend"
      >
        <div
          v-if="index > 2"
          style="white-space: nowrap"
          @click="changeShow(item)"
        >
          <span style="margin: 0 10px">
            <i class="el-icon-check" style="font-size: 16px" />
          </span>
          <span>{{ item.label }}</span>
        </div>
        <div v-else>
          <el-tooltip content="固定列无法操作" placement="top">
            <div style="white-space: nowrap">
              <span style="margin: 0 10px">
                <i class="el-icon-check" style="font-size: 16px" />
              </span>
              <span>{{ item.label }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <template slot="footer">
      <el-button-group>
        <el-button size="small" @click="modalCancel">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="tableShowColumnSet"
        >确 定</el-button>
      </el-button-group>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: '',
  props: {
    data: Array
  },
  data() {
    return {
      tableColumnModal: false,
      tableColumnSetData: [],
      dragObj: {},
      dragEndObj: {},
      reportBorrowApplyTableCellArr: []
    }
  },
  methods: {
    modalCancel() {
      this.tableColumnModal = false
      this.tableColumnSetData = []
      this.dragObj = {}
      this.dragEndObj = {}
      this.reportBorrowApplyTableCellArr = []
    },
    // 设置列的 显示/隐藏
    changeShow(item) {
      item.show = !item.show
    },
    // 开始拖拽 (改变列的显示顺序)
    dragstart(obj, index) {
      if (index <= 2) {
        this.dragObj = {}
        this.dragEndObj = {}
        return
      }
      this.dragObj = obj
    },
    // 记录移动过程中信息
    dragenter(obj, index) {
      // 固定前三个不操作
      if (index <= 2 || Object.keys(this.dragObj).length == 0) {
        this.dragObj = {}
        this.dragEndObj = {}
        return
      }
      this.dragEndObj = obj
    },
    // 做最终操作
    dragend(value) {
      if (
        Object.keys(this.dragObj).length === 0 ||
        Object.keys(this.dragEndObj).length === 0
      ) {
        this.dragObj = {}
        this.dragEndObj = {}
        return
      }
      if (this.dragObj !== this.dragEndObj) {
        const oldIndex = this.tableColumnSetData.indexOf(this.dragObj)
        const newIndex = this.tableColumnSetData.indexOf(this.dragEndObj)

        const newItems = [...this.tableColumnSetData]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.dragObj)
        // this.items一改变，transition-group就起了作用
        this.tableColumnSetData = [...newItems]
        this.dragObj = {}
        this.dragEndObj = {}
      }
    },
    // 打开设置初始页面
    dialogOpen(data) {
      this.tableColumnModal = true
      this.reportBorrowApplyTableCellArr = data
      this.tableColumnSetData = JSON.parse(JSON.stringify(data))
    },
    // 设置
    tableShowColumnSet() {
      this.tableColumnModal = false
      const tempColArr = JSON.parse(JSON.stringify(this.tableColumnSetData))
      this.$emit('changeColums', tempColArr)
      this.reportBorrowApplyTableCellArr = tempColArr
      //   localStorage.setItem(
      //     "reportBorrowApplyInfoColDataStr",
      //     JSON.stringify(this.tableColumnSetData)
      //   );
    }
  }
}
</script>
<style type="text/css" scoped>
[v-cloak] {
  display: none;
}

.fold {
  display: inline-block;
  position: absolute;
  right: 3px;
}

.fold img {
  margin-top: -2px;
}

.fold span:hover {
  color: #00a8ff;
}

.search-bg-span {
  cursor: pointer;
  line-height: 36px;
  font-size: 13px;
  color: #00a8ff;
}

.no-search-bg-span {
  cursor: pointer;
  line-height: 36px;
  font-size: 13px;
  color: grey;
}

.label-sign {
  width: 3px;
  height: 20px;
  background: #00a0e9;
  margin-bottom: 0;
  margin-top: 10px;
}

.column-select .el-checkbox {
  margin-left: 15px !important;
  width: 30%;
  margin: 10px 1%;
}

.column-select .el-dialog__body {
  padding: 10px 10px 20px 10px;
}

.col-setting {
  padding: 0 5px;
  border-top: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  background: #f8f8f9;
  height: 30px;
  line-height: 42px;
}

.columnSet {
  height: 30px;
  line-height: 30px;
  border: 1px solid #e8eaec;
}

.columnSetLast {
  height: 30px;
  line-height: 30px;
  border: 1px solid #e8eaec;
}

.blue-color {
  color: #00a0e9;
}

.gray-color {
  color: #999;
}

.customList {
  display: grid;
  gap: 10px 10px;
  grid-template-columns: repeat(5, 1fr);
}
</style>
